<template>
    <div class="ydyl-map">
        <!-- <div id="map"></div> -->
        <L7Map map-id="ydyl" @loaded="handleMapLoaded" />
    </div>
</template>

<script setup lang="ts">
import mapboxgl from 'mapbox-gl';
import { Map, Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7'

const handleMapLoaded = async (scene: Scene) => {
    // https://img1.baidu.com/it/u=2242493273,1400276900&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741107600&t=193e7d4630848f41fe520c4aa2680d2e

    scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
    const belt = await (
        await fetch('https://gw.alipayobjects.com/os/rmsportal/UpapMomPYUeiBjbHNAma.json')
    ).json();
    const line = await (
        await fetch('https://gw.alipayobjects.com/os/rmsportal/kwUdcXnxQtexeGRvTGtA.json')
    ).json();
    const line2 = await (
        await fetch('https://gw.alipayobjects.com/os/rmsportal/dzpMOiLYBKxpdmsgBLoE.json')
    ).json();
    const point = await (
        await fetch('https://gw.alipayobjects.com/os/rmsportal/opYqFyDGyGUAUXkLUhBV.json')
    ).json();
    const fillLayer = new PolygonLayer({
        autoFit: false,
    })
        .source(belt)
        .color('cname', function (value) {
            return value == '中国' ? 'rgba(46,149,169,0.45)' : 'rgba(227,244,244,1)';
        })
        .shape('fill');

    const linelayer = new LineLayer().source(line).color('rgb(79,147,234)').size(1.5).shape('line');

    const linelayer2 = new LineLayer()
        .source(line2)
        .color('rgb(11,94,69)')
        .size(3.5)
        .shape('line')
        .style({
            // 'lineType':'solid'
        });

    const pointlayer = new PointLayer({}).source(point).size(12.0).shape('local').style({ opacity: 0.9 });


    //   shape('name', 'text') name:映射property的key text为固定值
    const textlayer = new PointLayer({})
        .source(point)
        .size(12.0)
        .shape('name', 'text')
        .color('#027aff')
        .style({
            textOffset: [0, -42],
            stroke: '#fff',
            strokeWidth: 2,
            textAnchor: 'bottom',
        });
    scene.addLayer(fillLayer);
    scene.addLayer(linelayer);
    scene.addLayer(linelayer2);
    scene.addLayer(pointlayer);
    scene.addLayer(textlayer);

}

// const initMap = () => {
//     mapboxgl.accessToken = 'aaa'
//     const mapbox = new mapboxgl.Map({
//         container: 'map',
//         style: {
//             version: 8,
//             sources: {
//                 m_mono: {
//                     type: 'raster',
//                     tiles: ['/tile/{z}/{x}/{y}.png'],
//                     tileSize: 256,
//                     attribution: '',
//                 },
//             },
//             layers: [
//                 {
//                     id: 'm_mono',
//                     type: 'raster',
//                     source: 'm_mono',
//                     minzoom: 0,
//                     maxzoom: 18,
//                 },
//             ],
//         },
//         center: [60.268, 30.3628],
//         zoom: 1.5,
//         projection: 'mercator',
//     });

//     const scene: Scene | any = new Scene({
//         id: 'map',
//         map: new Map({
//             mapInstance: mapbox
//         }),
//         logoVisible: false
//     })

//     scene.on('style.load', () => {
//         scene.map.setFog({
//             color: "rgb(186, 210, 235)",
//             "high-color": "rgb(36, 92, 223)",
//             "horizon-blend": 0.02,
//             "space-color": "rgb(11, 11 ,25)",
//             "star-intensity": 0.6,
//         });
//     })

//     // https://img1.baidu.com/it/u=2242493273,1400276900&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741107600&t=193e7d4630848f41fe520c4aa2680d2e
//     scene.on('loaded', async () => {
//         scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
//         const belt = await (
//             await fetch('https://gw.alipayobjects.com/os/rmsportal/UpapMomPYUeiBjbHNAma.json')
//         ).json();
//         const line = await (
//             await fetch('https://gw.alipayobjects.com/os/rmsportal/kwUdcXnxQtexeGRvTGtA.json')
//         ).json();
//         const line2 = await (
//             await fetch('https://gw.alipayobjects.com/os/rmsportal/dzpMOiLYBKxpdmsgBLoE.json')
//         ).json();
//         const point = await (
//             await fetch('https://gw.alipayobjects.com/os/rmsportal/opYqFyDGyGUAUXkLUhBV.json')
//         ).json();
//         const fillLayer = new PolygonLayer({
//             autoFit: false,
//         })
//             .source(belt)
//             .color('cname', function (value) {
//                 return value == '中国' ? 'rgba(46,149,169,0.45)' : 'rgba(227,244,244,1)';
//             })
//             .shape('fill');

//         const linelayer = new LineLayer().source(line).color('rgb(79,147,234)').size(1.5).shape('line');

//         const linelayer2 = new LineLayer()
//             .source(line2)
//             .color('rgb(11,94,69)')
//             .size(3.5)
//             .shape('line')
//             .style({
//                 // 'lineType':'solid'
//             });

//         const pointlayer = new PointLayer({}).source(point).size(12.0).shape('local').style({ opacity: 0.9 });


//         //   shape('name', 'text') name:映射property的key text为固定值
//         const textlayer = new PointLayer({})
//             .source(point)
//             .size(12.0)
//             .shape('name', 'text')
//             .color('#027aff')
//             .style({
//                 textOffset: [0, -42],
//                 stroke: '#fff',
//                 strokeWidth: 2,
//                 textAnchor: 'bottom',
//             });
//         scene.addLayer(fillLayer);
//         scene.addLayer(linelayer);
//         scene.addLayer(linelayer2);
//         scene.addLayer(pointlayer);
//         scene.addLayer(textlayer);
//     });

// }

onMounted(() => {
    // initMap()
})
</script>

<style lang="less" scoped>
.ydyl-map {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;

    #map {
        width: 100%;
        height: 100%;
    }
}
</style>